
<template>
  <div class="wrap">
    <div class="placeholder"></div>
    <div class="fixed_btn">
      <button class="venice" @click="venice1">立即咨询</button>
      <button class="tryout" @click="tryout">领取8000元功能大礼包</button>
    </div>

    <el-dialog :visible.sync="dialogVisible" center :lock-scroll="false">
      <span>
        <div>
          <img src="~@/assets/img/img_1_23.png" alt />
        </div>
        <p>您可以拨打电话或者在线咨询</p>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button
          icon="iconfont icon-kefu2"
          plain
          round
          type="primary"
          @click="venice2"
          >&nbsp;在线客服</el-button
        >
        <el-button
          icon="iconfont icon-telephone"
          round
          type="primary"
          @click="venice3"
          >&nbsp;电话咨询</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    venice1() {
      this.dialogVisible = true;
    },
    tryout() {
      this.$router.push({
        name: "login",
        query: {
          fromcode: this.$route.query.fromcode,
        },
      });
    },
    venice2() {
      this.dialogVisible = false;
      if ($("#nb_icon_wrap").length > 0) {
        $("#nb_icon_wrap").click();
      }
    },
    venice3() {
      window.location.href = "tel:4009008819";
    },
  },
};
</script>
<style lang="scss" scoped>
.wrap {
  height: 44px;
}
.fixed_btn {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 120;
  box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.1);
  > button {
    height: 44px;
    font-size: 14px;
    outline: none;
    border: none;
    width: 50%;
    cursor: pointer;
    white-space: nowrap;
    &.venice {
      background: #ffffff;
      color: #fe8401;
    }
    &.tryout {
      background: #fe8401;
      color: #ffffff;
    }
  }
}

.el-dialog__wrapper {
  display: flex;
  align-items: center;
}
::v-deep .el-dialog {
  margin-bottom: 0;
  margin-top: 0 !important;
  width: 80%;
  max-width: 400px;
  .el-dialog__body {
    text-align: center;
    padding: 0 16px 10px;
  }
  .dialog-footer {
    .el-button {
      padding: 9px 16px !important;
    }
  }
}
</style>